<template>
  <div class="my-10 px-20 bg-white">
    <div class="flex justify-between py-10 b-b-1 b-b-solid b-b-[#f1f1f1]">
      <p class="c-[#333] font-bold text-13 pr-10 text-ellipsis--l1">
        {{ item.productItems[0] && item.productItems[0].productName }}
      </p>
      <span class="text-13 white-space" :class="[colorStatus(item.orderStatus)?colorStatus(item.orderStatus):'']">
        {{myOrderStatus(item.orderStatus)}}
      </span>
    </div>
    <div class="py-12  b-b-1 b-b-solid b-b-[#f1f1f1]">
      <div class="flex items-center pb-5 justify-between">
        <p class="">
          <span class="c-[#999] text-13">价格：</span>
          <span class="c-[#f00] text-15">
            ￥{{ formatMoney(item.price) }}
          </span>
        </p>
        <!-- <div class="ml5" @click="refund(item)">
          <nut-button type="primary" color="#999" size="small">退款</nut-button>
        </div> -->
      </div>
      <div class="flex items-center">
        <p class="c-[#999]  text-13">
          <span>订单号：</span> {{ item.orderNo }}
        </p>
      </div>
    </div>
    <div class="flex justify-between items-center py-10 b-b-1 b-b-solid b-b-[#f1f1f1]">
      <p class="c-[#999] text-13">
        {{ item.createTime || '2023-11-12 12:12:12' }}
      </p>
      <div class="c-amber text-13 flex">
        <nut-button type="default" size="small" plain @click="toOrderDetail(item)">订单详情</nut-button>
        <div class="ml5" v-if="item.orderStatus === 1" @click="openPayPopup(item)">
          <nut-button type="primary" color="#3d8ffd" size="small">立即支付</nut-button>
        </div>
      </div>
    </div>
  </div>
  <payPopup ref="payWayPop" :payAccount="pay_amount" :orderNo="orderNo" />
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import { useRouter } from 'vue-router'
import { myOrderStatus, colorStatus } from '@/utils/type/visa.js'
import { formatMoney } from '@/utils/common/money.js'
import payPopup from '@/components/payPopup/index.vue'
import { refundPay } from '@/api/visa'
import { showToast } from '@nutui/nutui';

const router = useRouter()
const emit = defineEmits(['refund'])
defineProps({
  item: {
    type: Object,
    require: true
  }
})
const toOrderDetail = (item) => {
  let params = {
    orderNo: item.orderNo,
    price: item.price,
    productName: item.productItems[0].productName
  }
  router.push({ path: '/orderDetail', query: params })
}
const refund = async (item) => {
  let orderNo = item.orderNo
  const result = await refundPay(orderNo)
  const { code, data, success, message } = result
  if (+code === 200 && success) {
    showToast.text('退款成功');
    emit('refund')
  } else if (+code === 200 && !success) {
    showToast.text(message);
  }
}
const payWayPop = ref()
const orderNo = ref(0)
const pay_amount = ref(0)
const openPayPopup = async (item) => {
  payWayPop.value.open()
  orderNo.value = item.orderNo
  pay_amount.value = item.price
}

</script>

<style lang="scss" scoped>
</style>